const container = document.querySelector(".container")
//定义开关，用来判断是in还是out
let isIn = true;
let isOut = false;
let span;   //鼠标进入容器时用来创建span

//container绑定鼠标进出事件
container.addEventListener("mouseenter", (e)=>{
    if(isIn){
        //生成span元素的位置=鼠标距离页面位置-距离父容器位置
        let x = e.clientX-e.target.offsetLeft;
        let y = e.clientY-e.target.offsetTop;
        //创建span元素
        span = document.createElement('span')
        span.style.left = x + 'px';
        span.style.top = y + 'px';
        //改变span的class名
        span.className = "";
        span.className = "in";
        container.appendChild(span);
        isIn = false;
        isOut = true;
    }
})

container.addEventListener("mouseleave", (e)=>{
    if(isOut){      
        //生成span元素的位置=鼠标距离页面位置-距离父容器位置
        let x = e.clientX-e.target.offsetLeft;
        let y = e.clientY-e.target.offsetTop;
        span.style.left = x + 'px';
        span.style.top = y + 'px';
        span.className = "";
        span.className = "out";
        isIn = true;
        isOut = false;
        setTimeout(()=>{
            container.removeChild(span)
        }, 500)
    }
})